import { View, Text, Input, Image, Button } from '@tarojs/components'
import { useState } from 'react';
import './register.less';
import Taro, { useDidShow } from '@tarojs/taro'
import { AtForm, AtInput, AtButton,AtMessage} from 'taro-ui'
import imageHttp from '../../http/imageHttp'
import http from '../../http/http'
import "taro-ui/dist/style/components/message.scss";

function Register() {
  //是否展示
  const [isShow,setIsShow]=useState(false);
  //图片token
  const [imageToken, setImageToken] = useState('');
  const [imgUrl, setImgUrl] = useState('');
  useDidShow(() => {
    imageHttp({
      url: 'http://img.qincore.cn/api/token',
      method: 'post',
      data: {
        email: 'andyhuyuxin@outlook.com',
        password: '121hulihu'
      }
    }).then((res) => {
      setImageToken(res.data.data.token);
    })
  })
  const upload = () => {
    Taro.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        Taro.uploadFile({
          url: 'http://img.qincore.cn/api/upload', 
          filePath: tempFilePaths[0],
          name: 'image',
          header: { 'token': imageToken },
          success(res) {
            let datas = JSON.parse(res.data);
            setImgUrl(datas.data.url);
            setIsShow(true);
          }
        })
      }
    })
  }
  const [inp1, setInp1] = useState('');
  const [inp2, setInp2] = useState('');
  const change1 = (e) => {
    setInp1(e)
  }
  const change2 = (e) => {
    setInp2(e)
  }
  const register = (type) => {
    if(!inp1||!inp2||!imgUrl){
      Taro.atMessage({
        'message': '填少了',
        'type': type,
      })
    }
    else{
      http({
        url: '/yanghao/register',
        method: 'post',
        data: {
          inp1,
          inp2,
          imgUrl
        }
      }).then(res => {
        if (res.code == 200) {
          Taro.navigateTo({
            url: '/pages/login/login'
          })
        }else{
          Taro.atMessage({
            'message': '用户已存在',
            'type': type,
          })
        }
      })
    }
  }
  return (
    <View className='d-f f-c y-c register'>
      <AtMessage />
      <View className='d-f x-s-b y-c tou'>
          <View>
            <View className='hello'>您好,</View>
            <View className='my-1'>欢迎来到XXX商家管理后台~</View>
          </View>
          <View>
            <Image className='img'src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c'/>
          </View>
      </View>
      <Image src={imgUrl} className={isShow?'img':'isNone'} onClick={() => upload()}></Image>
      <View className={!isShow?'at-icon at-icon-user touxiang':'isNone'} onClick={() => upload()} ></View>
      <AtForm>
            <AtInput 
              name='inp1 '
              title='账号:' 
              type='text' 
              placeholder='请输入账号' 
              value={inp1}
              onChange={(e) => change1(e)} 
            />
            <AtInput 
              name='inp2'
              value={inp2}
              title='密码:' 
              type='password' 
              placeholder='请输入密码' 
              onChange={(e) => change2(e)} 
            /> 
            <AtButton className='btn' onClick={() => register('error')} >注册</AtButton>
          </AtForm>
    </View>
  )
}

export default Register;
